<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>生命周期</h2>
      <p>{{ msg }}</p>
      <ul>
        <li v-for="item in list">{{ item.nm }}</li>
      </ul>
    </div>

    <script src="../Vue.js"></script>
    <script>
      // 不需要响应式的数据，尽量写到全局
      let timer;
      const vm = new Vue({
        // el: "#app",
        data: {
          msg: "hello",
          list: [],
          // timer: null,
        },
        methods: {
          fn() {},
        },
        // template相当于outerHTML
        // template: "<div>123456789</div>",
        // 创建阶段和挂载阶段的生命周期是会自动执行的
        // 生命周期的执行顺序是和书写顺序无关，和名字有关

        // vue是去初始化了事件和生命周期

        // 1. 创建阶段

        // 数据请求是不能再beforeCreate里面做，这里面拿不到this下的data
        // 数据请求可以在created,beforeMount,mounted里面做
        beforeCreate() {
          console.log("beforeCreate", this.msg, this.fn);
        },

        // vue是去初始化了注入和响应式(相当于初始化了data和methods)

        created() {
          console.log("created", this.msg, this.fn);
          // fetch("http://www.pudge.wang:3080/api/movies/list")
          //   .then((response) => response.json())
          //   .then((res) => {
          //     this.list = res.result;
          //   });
        },

        // vue回去检查是否有el选项
        // 检查是否有template选项

        // 2. 挂载阶段
        beforeMount() {
          console.log("beforeMount", document.querySelector("p").innerHTML);
        },

        // vue会生成真实dom去替换虚拟dom

        mounted() {
          console.log("mounted", document.querySelector("p").innerHTML);
          timer = setInterval(() => {
            console.log(123);
          }, 1000);

          setTimeout(() => {
            // this.msg = "hi";

            // this.$destroy();手动销毁这个组件
            this.$destroy();
          }, 3000);
        },

        // 3. 更新阶段
        // data数据发生改变以后触发,打印数据的时候，都是改变以后的数据
        beforeUpdate() {
          console.log(
            "beforeUpdate",
            this.msg,
            document.querySelector("p").innerHTML
          );
        },

        // vue是做了重新编译dom
        // 改变前和改变后不是数据改变的前后
        // 而是页面重新渲染的前后
        // 数据的改变和页面的渲染不是一起发生的

        // 不要再updated里面改变数据，会造成死循环
        updated() {
          // this.msg += "!";
          console.log(
            "updated",
            this.msg,
            document.querySelector("p").innerHTML
          );
        },

        // 4.销毁阶段
        // 销毁阶段，关闭定时器,websocket,js的事件监听,第三方插件
        beforeDestroy() {
          console.log("beforeDestroy");
          clearInterval(timer);
        },
        destroyed() {
          console.log("destroyed");
        },
      }).$mount("#app");
    </script>
  </body>
</html>
